import { NInput } from 'naive-ui';
import { computed, defineComponent, PropType } from 'vue';

const PrefixLabelSelect = defineComponent({
  props: {
    ...NInput.props,
    prefixTitle: {
      type: String as PropType<string>,
      default: () => '',
    },
  },
  emits: ['update:value'],
  setup(props, { emit, slots }) {
    const computedModelValue = computed({
      get: () => props.value,
      set: (val) => emit('update:value', val),
    });

    return () => (
      <n-input-group>
        {props.prefixTitle && <n-input-group-label>{props.prefixTitle}</n-input-group-label>}
        <NInput v-model:value={computedModelValue.value} {...props} v-slots={slots} />
      </n-input-group>
    );
  },
});

export default PrefixLabelSelect;
